<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        
thead{
    width: 600px;
    height: 50px;
    text-align: center;
}
thead tr th{
   width: 155px;
   text-align: center;
}
.box button{
    width: 100px;
    height: 30px;
}
.xinn{
    position: absolute;
    width: 300px;
    height: 500px;
    border: 1px solid black;
    display: none;
left: 700px;
}
.tr1 td{
    text-align: center;
}
    </style>
</head>
<body>
    <div class="box">
        <button onclick="xin()">新增专业</button>

        <table border="1" cellspacing="0">
            <thead>
            <tr>
                <th>专业</th>
                <th>学费</th>
                <th>是否记录课时</th>
                <th>总课时</th>
            </tr>
            </thead>
       <tbody id="tbody">


       </tbody>
        </table>
       
    </div>
    <div class="xinn">
        专业：<input type="text" placeholder="专业" id="zhuan">
        <p></p>
        学费：<input type="text" placeholder="学费" id="xue">
        <p></p>
        是否记录课时：<input type="radio" name="a" value="是" id="si">是
        <input type="radio" name="a" value="否" id="s">否

        <p></p>
        总课时：<input type="text" placeholder="总课时" id="zong">

        <p></p>
        <button onclick="add()">提交</button>
        <button onclick="dda()">取消</button>


    </div>
    <script src="../js/pubilc.js"></script>
    <script>
         var tbody=document.querySelector("#tbody")
         var xinn=document.querySelector(".xinn")
       window.onload = function() {
				ho()
			}

         function ho(){
            xhr({
    methods:'get',
    url:'majors?page=1&size=3',
     data:JSON.stringify({}),
    success:function(res){

console.log(res)



        for(var i=0;i<res.length;i++){
            console.log(res[i].name)
            tbody.innerHTML+=`
            <tr class="tr1">
            <td>${res[i].name}</td>
            <td>${res[i].tuition}</td>
            <td>${'是'}</td>
            <td>${res[i].totalHours}</td>
            </tr>
            `
        }

    }
})

         } 

        function xin(){
            xinn.style.display="block"
        }
function add(){
    var  a=document.querySelector("input[name='a']:checked").value
   

  
    
xhr({
    methods:'post',
    url:'majors',
    data: JSON.stringify({
        name:zhuan.value,
       tuition:xue.value,
       totalHours:zong.value
    }),
    success:function(res){
        console.log(res);
          zhuan.value=""
    xue.value=""
    zong.value=""
    si.checked=false
    s.checked=false
    xinn.style.display="none"
    }

})

}
function dda(){
    xinn.style.display="none"
}

    </script>
</body>
</html>